<template>
	<div class="tinymce-editor"><editor v-model="myValue" :init="init"></editor></div>
</template>
<script>
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver';
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/print'; // 插入印刷插件
import 'tinymce/plugins/preview';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/directionality';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/visualchars';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/media';
import 'tinymce/plugins/template';
import 'tinymce/plugins/code';
import 'tinymce/plugins/codesample';
import 'tinymce/plugins/table';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/hr';
import 'tinymce/plugins/pagebreak';
import 'tinymce/plugins/nonbreaking';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/imagetools';
import 'tinymce/plugins/textpattern';
import 'tinymce/plugins/help';
// import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/autosave';
// import 'tinymce/plugins/bdmap';
// import 'tinymce/plugins/indent2em';
// import 'tinymce/plugins/autoresize';
// import 'tinymce/plugins/lineheight';
// import 'tinymce/plugins/formatpainter';
// import 'tinymce/plugins/axupimgs';
import 'tinymce/plugins/image'; // 插入上传图片插件
import 'tinymce/plugins/link'; // 插入上传文件插件
import 'tinymce/plugins/media'; // 插入视频插件
import 'tinymce/plugins/table'; // 插入表格插件
import 'tinymce/plugins/lists'; // 列表插件
import 'tinymce/plugins/wordcount'; // 字数统计插件
import 'tinymce/plugins/autoresize'; // 高度自适应
import 'tinymce/icons/default';
export default {
	components: {
		editor: Editor
	},
	data() {
		return {
			myValue: '',
			// 初始化tinyEdit
			init: {
				language_url: '/tinymce/zh_CN.js',
				language: 'zh_CN',
				skin_url: '/tinymce/skins/ui/oxide',
				selector: 'textarea',
				plugins:
					'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help  autosave',
				toolbar:
					'pageembed code preview |  undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent |styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap  hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
				images_upload_url: '/demo/upimg.php',
				images_upload_base_path: '/demo',
				branding: true,
				menubar: true,
				height: 650, //编辑器高度
				min_height: 400,
				fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
				font_formats:
					'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
				link_list: [{ title: '预置链接1', value: 'http://www.tinymce.com' }, { title: '预置链接2', value: 'http://tinymce.ax-z.cn' }],
				image_list: [
					{ title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
					{ title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
				],
				image_class_list: [{ title: 'None', value: '' }, { title: 'Some class', value: 'class-name' }],
				importcss_append: true,
				autosave_ask_before_unload: false,
				content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
				// 图片上传
				images_upload_handler: (blobInfo, success) => {
					const img = 'data:image/jpeg;base64,' + blobInfo.base64();
					success(img);
				},
				// 文件上传
				//自定义文件选择器的回调内容
				file_picker_callback: function (callback, value, meta) {
					console.log(callback);
					console.log(value);
					console.log(meta);
					// if (meta.filetype === 'file') {
					//   callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
					// }
					// if (meta.filetype === 'image') {
					//   callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
					// }
					// if (meta.filetype === 'media') {
					//   callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
					// }
				},
			}
		};
	},
	mounted() {
		tinymce.init({});
	}
};
</script>
